<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./Tpl/css/bootstrap.min.css">
	<style type="text/css">
		.main{
			margin-top: 100px;
		}

	</style>
</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">留言板</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>


    <div class="container main">
      <!-- Example row of columns -->
      <div class="col-md-12" style="margin-top:20px;">
      	<form class="form-horizontal reg">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
              <input type="text" class="form-control checkdata" id="username" is-check='0' placeholder="用户名" name="username">
            </div>
            <p class="info"></p>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
              <input type="email" class="form-control checkdata" id="inputEmail3" is-check='0' name="email" placeholder="Email">
            </div>
            <p class="info"></p>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-4">
              <input type="password" class="form-control checkdata password" id="inputPassword3" name="password" is-check='0' placeholder="Password">
            </div>
            <p class="info"></p>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-4">
              <input type="password" class="form-control passwords" is-check='0' id="inputPassword3" name="passwords" placeholder="password">
            </div>
            <p class="info"></p>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" id="btn" class="btn btn-danger" disabled="">注册</button>
            </div>
          </div>
        </form>
      </div>
      <hr>

      <footer>
        <p>© 2016 Company, Inc.</p>
      </footer>
    </div> 
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function  () {
            $('.checkdata').blur(function(event) {
                checkval = $(this).val();
                checkIndex = $(this).attr('name');
                //动态的组字符串
                str = "checkData = {"+checkIndex+": checkval}";
                // console.log(str);
                //把字符串当js代码使用
                eval(str);
                // console.log(checkData);
                objUser = $(this);

                $.ajax({
                  url: './checkReg.php',
                  type: 'post',
                  dataType: 'json',
                  data: checkData,
                })
                .done(function(data) {
                    if(data.error==1){
                        objUser.parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
                        objUser.attr('is-check',0);
                    }else{
                        objUser.parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
                        objUser.attr('is-check',1);
                        pass ();
                        if(checkIndex=="password"){
                          
                        }
                    }
                })
                .fail(function() {
                    alert(777)
                })
                
            });
            
            $('.passwords').blur(function(event) {
                passwords = $(this).val();
                password = $('.password').val();

                if(passwords==password && passwords!=''){
                  $(this).parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+"密码一致");
                     $(this).attr('is-check',1);
                     pass ();
                }else{
                  $(this).parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+"密码不一致,或者为空");
                    $(this).attr('is-check',0);
                }

            });

        function pass () {
          num =0;
          for (var i = 0; i <$('.reg input').length; i++) {
              isCheck = $('.reg input').eq(i).attr('is-check');
              num +=parseInt(isCheck);
          };

          if(num==4){
            $('#btn').attr('disabled',false);
          }
        }

            
            
        })
    </script>
  

</body>
</html>